<template>
	<view class="container">
		<uni-nav-bar title="点采退货订单" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<scroll-view :style="{height:`calc(100vh - 88rpx - ${statusBarHeight}px)`}" style="height: calc(100vh - var(--window-top));overflow: hidden;"
			scroll-y enhanced :show-scrollbar="false" :scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh"
			:refresher-triggered="refreshStatus" @touchmove.stop @scrolltolower="scrolltolower">
			<view class="list" v-if="goodsList.length > 0">
				<view class="item" v-for="(item,index) in goodsList" :key="item.id">
					<view class="line">
						<view class="line_left" style="width: 70%;word-break: break-all;">
							退货编号：{{ item.returnsNumber }}
						</view>
						<view class="line_right" style="width: 30%;">
							状态：{{ item.returnsState == '0' ? '未审核':item.returnsState == '1' ? '审核拒绝':'审核通过'  }}
						</view>
					</view>
					<view class="line">
						<view class="line_left" style="width: 70%;word-break: break-all;">
							入库编号：{{ item.inboundNumber }}
						</view>
						<view class="line_right" style="width: 30%;">
							退货数量：{{ item.returnNum }}
						</view>
					</view>
					<view class="line">
						<view class="line_left">
							退货仓库：{{ item.warehouseName }}
						</view>
						<view class="line_right">
							退货总额：{{ item.returnMoney }} 元
						</view>
					</view>
					<view class="line">
						<view class="line_right" style="width: 100%;">
							<view class="btn type-1" v-if="item.returnsState == '1'"
								@click.stop="()=>{$navTo('./orderBackDetail',{id:item.id,status:'edit'});newPage = 'edit'}">修改</view>
							<view class="btn type-1" @click.stop="()=>{$navTo('./orderBackDetail',{id:item.id,status:'detail'});newPage = 'detail'}">详情</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loading" v-if="goodsList.length > 0"></uni-load-more>
			</view>
			<view style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
				v-if="goodsList.length == 0">
				<image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
	import { reqReturnOrder } from '@/apis/goods.js'
	export default {
		name: "ProcureBack",
		data() {
			return {
				safeAreaBottom: safeAreaBottom,
				goodsList: [],
				refreshStatus: false,
				loading: 'loading',
				page: {
					pageNum: 1,
					pageSize: 15,
					total: 0
				},
				newPage: 'detail'
			}
		},
		onLoad() {
			this.getOrderList();
		},
		onShow() {
			if (this.newPage == 'edit') {
				this.goodsList = [];
				this.loading = 'loading';
				this.page = {
					pageNum: 1,
					pageSize: 15
				}
				this.getOrderList()
			}
			this.newPage = 'detail'
		},
		methods: {
			pulldownRefresh() {
				this.loading = 'loading';
				this.refreshStatus = true;
				this.page = {
					pageNum: 1,
					pageSize: 15,
					total: 0
				}
				this.goodsList = [];
				this.getOrderList();
			},
			scrolltolower() {
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.getOrderList();
			},
			async getOrderList() {
				let { page: { pageNum, pageSize } } = this;
				let res = await reqReturnOrder({ pageNum, pageSize });
				if (res.code === 200) {
					const data = res.data;
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					if (res.data.isLastPage) {
						this.loading = "noMore";
					}
					this.refreshStatus = false;
				}
			},
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}

	.list {
		padding: 20rpx 20rpx;
		padding-bottom: 0;

		.item {
			padding: 20rpx 24rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			&:nth-last-child(2) {
				margin-bottom: 0;
			}

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: $uni-font-size-small;
				color: #333;
				margin-bottom: 20rpx;

				.line_left,
				.line_right {
					width: 50%;
				}

				.line_right {
					width: 50%;
					text-align: right;
					justify-content: flex-end;
					display: flex;

					.btn {
						width: 120rpx;
						font-size: $uni-font-size-small;
						text-align: center;
						margin-right: 30rpx;
						border-radius: 5rpx;
						height: 60rpx;
						box-sizing: border-box;
						line-height: 60rpx;
						margin-right: 30rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>